<template>
  <view class="order">
    <view class="status-box">
      订单状态：
      <text class="status">{{ status }}</text>
    </view>
    <!-- 收货地址 -->
    <view class="address_box">
      <u-icon name="map-fill" color="#2979ff" size="50"></u-icon>
      <view class="center">
        <view class="name">
          <text class="text1">{{ order.consignee }}</text>
          <text class="phones">{{ order.mobile }}</text>
        </view>
        <view class="address_name">{{ order.province_name }}{{ order.city_name }}{{ order.district_name }}{{ order.address }}</view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view v-for="(good, index) in order.goods" :key="index" class="goods" @click="$u.route(`/pages/goods/goods?id=${good.goods_id}`)">
      <view class="goods_data">
        <image :src="good.goods_thumbnail"></image>
        <view class="goods_title">
          <view class="g_name">{{ good.goods_name }}</view>
          <view class="price">
            <view class="t1">￥{{ good.goods_price }}</view>
            <view class="t3">x{{ good.goods_quantity }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="order_more">
      <view class="morelist">
        <text class="title">商品总价</text>
        <view class="right_title">￥{{ order.goods_amount }}</view>
      </view>
      <view class="morelist">
        <view class="title"><text>运费</text></view>
        <view class="right_title">￥{{ order.express_fee }}</view>
      </view>
      <view class="morelist">
        <text class="title">实付款</text>
        <view class="right_title">￥{{ order.total_amount }}</view>
      </view>
      <view class="morelist">
        <text class="title">订单编号</text>
        <view class="right_title">{{ order.order_sn }}</view>
      </view>
      <view class="morelist">
        <text class="title">创建时间</text>
        <view class="right_title">{{ order.create_time }}</view>
      </view>
      <view class="morelist" v-if="order.shipment_name">
        <text class="title">物流单号</text>
        <view class="right_title">
          {{ order.shipment_name }}：{{ order.tracking_number }}
          <text class="copy" @click="copy(order.tracking_number)">复制</text>
        </view>
      </view>
      <view class="tips" v-if="order.user_note">
        <view class="tips_name">备注信息</view>
        <view class="textarea_box">{{ order.user_note }}</view>
      </view>
    </view>
    <view class="bottom_btn">
      <view class="btn-box">
        <view class="btn del" @click="cancelOrder" v-if="status == '待支付'">取消订单</view>
        <view class="btn pay" @click="$u.route('/pages/pay/payment/payment?id=' + id)" v-if="status == '待支付'">继续支付</view>
        <view class="btn pay" v-if="status == '待收货'" @click="arrived">确认收货</view>
        <view class="btn" @click="$makePhoneCall()">联系客服</view>
      </view>
    </view>
  </view>
</template>

<script>
import tools from '@/common/tools.js';
export default {
  data() {
    return {
      id: null,
      order: {},
      status: ''
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getOrder();
  },
  methods: {
    // 获取订单数据
    getOrder() {
      this.$api.get({
        url: 'order/order/detail',
        data: {
          id: this.id
        },
        success: res => {
          if (res.code === 1) {
            let order = res.data;
            this.order = order;
            if (order.order_status === 0) {
              this.status = '已完成';
            } else if (order.order_status === 2) {
              this.status = '已取消';
            } else if (order.pay_status === 0) {
              this.status = '待支付';
            } else if (order.shipping_status === 0 || order.shipping_status === 10) {
              this.status = '待发货';
            } else if (order.shipping_status === 1) {
              this.status = '待收货';
            }
          } else {
            this.$toast(res.msg || '数据获取失败');
          }
        }
      });
    },
    arrived() {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确定要收到货了吗？',
        success: res => {
          if (res.confirm) {
            that.$api.post({
              url: 'order/order/arrived',
              data: {
                id: that.id
              },
              success: res => {
                if (res.code === 1) {
                  that.getOrder();
                }
              }
            });
          }
        }
      });
    },
    cancelOrder() {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: res => {
          if (res.confirm) {
            that.$api.post({
              url: 'order/order/cancel',
              data: {
                id: that.id
              },
              success: res => {
                if (res.code === 1) {
                  that.getOrder();
                }
              }
            });
          }
        }
      });
    },
    copy(text) {
      if (tools.clipboardData(text)) {
        this.$toast('复制成功');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.order {
  padding: 20rpx 4% 130rpx;
}
.status-box {
  margin-bottom: 30rpx;
  font-size: 32rpx;
  margin-left: 10rpx;
  .status {
    font-weight: bold;
    color: rgb(242, 145, 0);
  }
}
.address_box {
  height: 150rpx;
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0rpx 0rpx 10rpx #ddd;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .center {
    margin-left: 20rpx;
  }
  .name {
    height: 60rpx;
    line-height: 60rpx;
  }
  .text1 {
    font-size: 26rpx;
    color: #333;
    display: inline-block;
    margin-right: 20rpx;
  }
  .phones {
    font-size: 24rpx;
    color: #999;
    z-index: 0;
  }
  .address_name {
    font-size: 26rpx;
    color: #333;
  }
}

.goods {
  background-color: #fff;
  box-shadow: 0rpx 0rpx 10rpx #ddd;
  padding: 20rpx 20rpx;
  .goods_data {
    width: 100%;
    display: flex;
    image {
      min-width: 150rpx;
      max-width: 150rpx;
      height: 150rpx;
      display: block;
      border-radius: 10rpx;
    }
  }
  .goods_title {
    font-size: 26rpx;
    margin-left: 20rpx;
  }
  .price {
    width: 100%;
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 20rpx;
  }
  .t1 {
    font-size: 30rpx;
    display: block;
  }
  .t2 {
    font-size: 24rpx;
    margin-left: 15rpx;
    color: #999;
  }
  .t3 {
    font-size: 26rpx;
    color: #999;
		margin-left: 8rpx;
  }
}

.order_more {
  padding: 0 2%;
  margin-top: 20rpx;
  background-color: #fff;
  box-shadow: 0rpx 0rpx 10rpx #ddd;
  border-radius: 10rpx;
  .morelist {
    height: 70rpx;
    line-height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx dashed #eee;
  }
  .title {
    color: #333;
    font-size: 26rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .right_title {
    color: #999;
    font-size: 26rpx;
  }
  .copy {
    font-size: 22upx;
    color: #888;
    background-color: #f8f8f8;
    height: 50upx;
    line-height: 50upx;
    padding: 0 20upx;
    border-radius: 10upx;
    margin-left: 20upx;
    display: inline-block;
  }
}
.tips {
  padding: 10rpx 0;
  margin-bottom: 120rpx;
  padding-bottom: 20rpx;
  .tips_name {
    font-size: 26rpx;
    font-weight: bold;
    line-height: 60rpx;
  }
}
.bottom_btn {
  width: 750rpx;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
  z-index: 100;
  .btn-box {
    display: flex;
    padding: 0 10rpx;
    justify-content: flex-end;
    align-items: center;
  }
  .btn {
    line-height: 52rpx;
    width: 160rpx;
    border-radius: 26rpx;
    border: 2rpx solid $u-border-color;
    font-size: 26rpx;
    text-align: center;
    color: $u-type-info-dark;
    margin-left: 20rpx;
  }
  .pay {
    background: rgb(242, 145, 0);
    color: #fff;
  }
  .del {
    background: #f40;
    color: #fff;
  }
}
</style>
